<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>moviehalltype</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="layui/css/layui.css"
	media="all">
<link rel="stylesheet"
	href="font-awesome-4.7.0/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="css/seat-charts.css" /> 
	<link href="css/style.css?v=1" rel="stylesheet" />

<style type="text/css">
.front {
				width: 700px;
				margin: 5px 32px 45px 64px;
				background-color: #f0f0f0;
				color: #666;
				text-align: center;
				padding: 3px;
				border-radius: 5px;
}
</style>
</head>
<body>
	 <div>
       <!-- 添加 -->
		<div id="addFormDiv" style="display: none ;padding : 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="example">

               <div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="" id="btn">立即添加</button>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-block">
						<input type="text" name="halltypename1" id="halltypename1" lay-verify="required" 
							autocomplete="off" placeholder="请输入影厅类型名称" class="layui-input" lay-verify="required">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">布局</label>
					<div class="layui-input-block">
						<input style="display: inline-block; width: 30%;"class="layui-input" type="number" name="row" id="row" max="20" min="1" lay-verify="required"  placeholder="请输入行数" lay-verify="required" >
						<input style="display: inline-block; width: 30%;" class="layui-input" type="number" max="20" min="1" name="column" id="column" lay-verify="required" required placeholder="请输入列数" lay-verify="required">
					    <button  style="display: inline-block; width: 10%;margin-left:20px" type="button" id="sure" class="layui-btn " >确定</button>
					</div>
				</div>

      <div id="seat_area">
          <div  style="text-align:center;margin-bottom:20px" class="front">screen</div> 
                   
      </div>
				
				
			</form>
		</div>
		
		<!-- 修改 -->
		<div id="editFormDiv" style="display: none;padding : 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="example">
                <div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="updMovieHallType" id="upd">立即修改</button>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-block">
						<input type="text" name="halltypeid" id="halltypeid" lay-verify="title"
							autocomplete="off" readonly class="layui-input" lay-verify="required">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-block">
						<input type="text" name="halltypename" id="halltypename" lay-verify="title"
							autocomplete="off" placeholder="请输入影厅类型名称" class="layui-input" lay-verify="required">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">是否修改布局</label>
					<div class="layui-input-block">
						<input type="radio" name="status" lay-filter="testRadio" value="1" id="no" title="否" checked="checked">
						<input type="radio" name="status" lay-filter="testRadio" value="0" id="yes" title="是(请编辑)">
					</div>
				</div>
				
				
				<div id="layout" style="display:none;">
					<div class="layui-form-item">
						<label class="layui-form-label">布局</label>
						<div class="layui-input-block">
							<input style="display: inline-block; width: 30%;"class="layui-input" type="number" max="20" min="1" name="row1" id="row1" lay-verify="required"  placeholder="请输入行数" >
							<input style="display: inline-block; width: 30%;" class="layui-input" type="number" max="20" min="1" name="column1" id="column1" lay-verify="required"  placeholder="请输入列数" >
						    <button  style="display: inline-block; width: 10%;margin-left:20px" type="button" id="sure1" class="layui-btn " >确定</button>
						</div>
					</div>
					<div id="seat_area1">
	                      <div  style="text-align:center;margin-bottom:20px" class="front">screen</div>       
	                </div>
            	</div>		
            	
             
			</form>
		</div>

<!-- 预览布局 -->
<div id="viewFormDiv" style="display: none ;padding : 20px 30px 0 0;">
	<div class="sits-area hidden-xs">
          <div  style="text-align:center;margin-bottom:20px" class="front">screen</div> 
                   
    </div>
</div>
		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					搜索名字：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
		
	</div>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">批量删除</button>
 <button class="layui-btn layui-btn-sm" lay-event="AddMovieHallType">添加信息</button>
    <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
  </div>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="barDemo1">
  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="view" class="but" >预览</button>
</script>

	<script src="layui/layui.js"charset="utf-8"></script>
	<script src="js/jquery-2.0.3.js"></script>
	<script src="js/jquery.seat-charts.min.js"></script>

	<script>
	var galleryful;
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem : '#test',
				url : 'selectMovieHallType',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '影厅类型表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'halltypeid',
					title : '影厅类型编号',
					width : 350,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'halltypename',
					title : '影厅类型名称',
					width : 430
				}, {
					field : 'content',
					title : '影厅大小/布局',
					width : 425,
					toolbar : '#barDemo1'
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 425
				} ] ],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					console.log(data[0].halltypeid);
					layer.confirm('确认要删除吗？', {
						icon : 3,
						title : '提示信息'
					}, function(index) {
						  //存储id的数组
						  var array = new Array();
						  for(var i=0;i<data.length;i++){
							array.push(data[i].halltypeid);
						  }
						  //批量删除
						  $.ajax({
						         url : "delAllMovieHallType",
						         type : "post",
						         data : {
						         array:array.toString(),//存储数组的字符串
						         },
						         success : function(data) {//提交成功后的回调函数
							    	  layer.msg(data.msg, {
											icon : 6,
											time : 2000
										}, function() {
											//刷新页面
											window.location.reload();
									  }); 
						          },
						           dataType : "json"//预期返回的数据类型
					    });	
				      });
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				case 'AddMovieHallType':
					console.log("add");
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '1000px', '600px' ],
						shade : 0.6,
						id : 'LAY_layuipro1' //设定一个id，防止重复弹出
						,
						content : $("#addFormDiv"), //后面不用.html()
						/* //关闭时刷新页面
						end:function(){
							location.reload();
						} */
					});
				}
			});
			var sc;
			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//删除单个
				if (obj.event === 'del') {
					layer.confirm('确定删除编号为'+data.halltypeid+'的影厅类型吗', function(index) {
						$.ajax({
							type : 'get', //提交方式
							url : "delMovieHallType/"+data.halltypeid, //地址和springmvc中控制器地址一致
							success : function(data) {
								if(data.code==1){
									layer.msg(data.msg, {
										icon : 6,
										time : 2000
									}, function() {
										window.location.reload();//刷新
								  });	
								}else{
									layer.msg(data.msg, {
										icon : 1,
										time : 1000
									});
								}
							}
						});
					});
				} else if (obj.event === 'edit') {
					//修改-先给我们的表单元素赋值
					$("#halltypeid").attr("value", data.halltypeid);
					$("#halltypename").attr("value", data.halltypename);
					$("#galleryful").attr("value", data.galleryful);
					layui.form.render('radio');
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '1200px', '650px' ],
						shade : 0.6,
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						content : $("#editFormDiv"), //后面不用.html()

					});

					//表单的render
					layui.form.render();
					
				}else if (obj.event === 'view') {
                    //预览布局
					console.log("布局:"+data.galleryful);
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '1000px', '600px'],
						shade : 0.6,
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#viewFormDiv"), //后面不用.html()
						end:function(){
							location.reload();
						} 
					});
					
			        console.log(data.galleryful.split(","));
			    
					var sc = $('.sits-area').seatCharts({
					    map: data.galleryful.split(",") , 
						naming: { //设置行列等信息
							top: false, //不显示顶部横坐标（行）
							//left:false,
							getLabel: function(character, row, column) { //返回座位信息 
								return column;
							}
						},click: function() {
							return this.style();
						},
					});
				} 
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							//只有一个key : value格式
							keywords : demoReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//监听提交-添加
			layui.form.on('submit(addMovieHallType)', function(data) {
				
			});
			
			//修改
			layui.form.on('submit(updMovieHallType)',function(data){
				    
		    });
			//是否修改布局-radio
			layui.form.on('radio(testRadio)', function(data){
			    if(data.value == '1'){
			            $("#layout").css("display", "none");
			        } else {
			            $("#layout").css("display", "block");
			        }
			});
			
				
		});
	</script>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;
		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>
	
	
	<script type="text/javascript" src="js/jquery.seat-charts.min.js"></script>
	
	<script type="text/javascript">
	//显示座位初状态
    var sc;
	$(document).ready(function() {
		 var $cart = $('#seats_chose'); //座位区
		 $("#sure").click(function(){
			 var row=$("#row").val();
			 var column=$("#column").val();
	         if(row!=null && column!=null){
		         console.log("进来了吗2");
		         $.ajax({
		         url:"seat11",
		         type:"get",
		         dataType:"json",
		         data:{
			          row:row,
			          column:column
		         },
		         success:function(data){
		            console.log("进来了吗3");
		            console.log(data);
		            //清除map
		          $('.seatCharts-row').remove();
                  $('.seatCharts-legendItem').remove();
                  $('#seat_area,#seat_area *').unbind().removeData();
		           //新建座位 
                  sc=$('#seat_area').seatCharts({
			            map:data,
			            naming: { //设置行列等信息
				           top: true, //显示顶部横坐标（行）
				           getLabel: function(character, row, column) { //返回座位信息 
					            return column;
				           }
			            },click: function(){
				         if (this.status() == 'available') { //若为可选座状态，添加座位
					     return 'selected';
				         } else if (this.status() == 'selected') { //若为选中状态
					     return 'available';
				         } else {
					     return this.style();
				         };
			            },
	                });
		         }           
		       });
	         }
	     });
     });	
	//增加
$("#btn").click(function(){
				    var halltypename=$("#halltypename1").val();		   
					var row=$("#row").val();
					var column=$("#column").val();	
					var array = new Array();
			if(row!=null&&column!=null&&sc!=null){
				sc.find('selected').each(function() {
					console.log(this.settings.id);
					array.push(this.settings.id);
				}); 
				
			 $.ajax({
		         url : "seat22",//提交地址
		         type : "get",//提交请求类型
		         data : {
		         halltypename:halltypename,
		         row:row,
		         column:column,
		         array:array.toString(),//数组的字符串
		         },
		         success : function(data) {//提交成功后的回调函数
		        	 if(data.code==1){
							layer.msg(data.msg, {
								icon : 6,
								time : 2000
							}, function() {
								window.location.reload();//刷新
						  });	
						}else{
							layer.msg(data.msg, {
								icon : 1,
								time : 1000
							});
					}
		         },
		         dataType : "json"//预期返回的数据类型
	       });
	   }				
 });	 	
</script>

<script type="text/javascript">
//显示座位初识状态
			var sc;
			$(document).ready(function() {
				var $cart = $('#seats_chose'); //座位区
				$("#sure1").click(function(){
				  var row=$("#row1").val();
				  var column=$("#column1").val();
				  if(row!=null && column!=null){
						$.ajax({
						url:"seat11",
						type:"get",
						dataType:"json",
						data:{
							row:row,
							column:column
						},
						success:function(data){
							console.log("进来了吗3");
							  //清除map
					        $('.seatCharts-row').remove();
					        $('.seatCharts-legendItem').remove();
					        $('#seat_area1,#seat_area1 *').unbind().removeData();
								sc = $('#seat_area1').seatCharts({
								map:data,
								naming: { //设置行列等信息
									top: true, //显示顶部横坐标（行）
									getLabel: function(character, row, column) { //返回座位信息 
										return column;
									}
								},
								click: function() {
									if (this.status() == 'available') { //若为可选座状态，添加座位
										return 'selected';
									} else if (this.status() == 'selected') { //若为选中状态
										return 'available';
									} else {
										return this.style();
									}
								},
							});
				   		  }
			     	   });
			   	  	}
				});
			});		
	       //修改-有无修改布局2种情况
			$("#upd").click(function(){
				 console.log("哈哈1");
				    var halltypeid=$("#halltypeid").val();
				    var halltypename=$("#halltypename").val();
				    var status=$("input[name='status']:checked").val();
				    if(status=="0"){
				    	var row=$("#row1").val();
						var column=$("#column1").val();
						var array = new Array();
							sc.find('selected').each(function() {
								console.log(this.settings.id);
								array.push(this.settings.id);
							}); 
						console.log("哈哈2");
						console.log(array);
					 $.ajax({
				         url : "updMovieHallType",//提交地址
				         type : "get",//提交请求类型
				         data : {
				         halltypeid:halltypeid,
				         halltypename:halltypename,
				         row:row,
				         column:column,
				         array:array.toString()//数组的字符串
				         },
				         success : function(data) {//提交成功后的回调函数
				        	 if(data.code==1){
									layer.msg(data.msg, {
										icon : 6,
										time : 2000
									}, function() {
										window.location.reload();//刷新
								  });	
								}else{
									layer.msg(data.msg, {
										icon : 1,
										time : 1000
									});
								}
				         },
				         dataType : "json"//预期返回的数据类型
			         });
				 	
				    }else {
				    	 $.ajax({
					         url : "updMovieHallType1",//提交地址
					         type : "get",//提交请求类型
					         data : {
					         halltypeid:halltypeid,
					         halltypename:halltypename,
					         },
					         success : function(data) {//提交成功后的回调函数
					        	 if(data.code==1){
										layer.msg(data.msg, {
											icon : 6,
											time : 2000
										}, function() {
											window.location.reload();//刷新
									  });	
									}else{
										layer.msg(data.msg, {
											icon : 1,
											time : 1000
										});
								}
					         },
					         dataType : "json"//预期返回的数据类型
				         });
			    	
				    }
					
		    });	 	

</script>
</body>
</html>